<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content query-stats" tabindex="-1">
        <div class="modal-header">
            <button type="button" class="close" data-bind="click: cancel" aria-hidden="true">
                <i class="icon-cancel"></i>
            </button>
            <h4 class="modal-title">Query Stats</h4>
        </div>
        <div class="modal-body" data-bind="with: queryStats">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label class="col-md-3 control-label">Total Results:</label>
                    <div class="col-md-9">
                        <p class="form-control-static" data-bind="text: $root.totalResults"></p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">Status</label>
                    <div class="col-md-9">
                        <p class="form-control-static" data-bind="text: IsStale ? 'Stale' : 'Up to date'"></p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">Duration:</label>
                    <div class="col-md-9">
                        <p class="form-control-static" data-bind="text: ((typeof (DurationInMs) !== 'undefined') ? DurationInMs.toLocaleString() : '? ') + ' ms'"></p>
                    </div>
                </div>
                <div class="form-group" data-bind="visible: !$root.isGraphQuery">
                    <label class="col-md-3 control-label">Index:</label>
                    <div class="col-md-9">
                        <p class="form-control-static force-text-wrap">
                            <a target="_blank" data-bind="text: IndexName, attr: { href: $root.selectedIndexEditUrl}, visible: $root.canNavigateToIndex"></a>
                            <span data-bind="text: IndexName, visible: !$root.canNavigateToIndex"></span>
                        </p>
                    </div>
                </div>
                <!-- TODO
                <div class="form-group" data-bind="visible: $root.didDynamicChangeIndex">
                    <label class="col-md-3 control-label">Index Explain:</label>
                    <div class="col-md-9">
                        <p class="form-control-static">
                            <a target='_blank' data-bind="attr: { href: $root.rawJsonUrl  + '&explain=true'}">Click Here</a>
                        </p>
                    </div>
                </div>
                    -->
                <div class="form-group">
                    <label class="col-md-3 control-label">ETag:</label>
                    <div class="col-md-9">
                        <p class="form-control-static" data-bind="text: ResultEtag"></p>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-bind="click: cancel">Close</button>
        </div>
    </div>
</div>
